import React, { Component } from 'react';
import {

  ScrollView,
  StatusBar,
  Animated, StyleSheet, Text,
  View, Image, TextInput, TouchableOpacity, Alert,
  ImageBackground,
  Dimensions
} from 'react-native';

class FadeInView extends React.Component {
  state = {
    fadeAnim: new Animated.Value(0),  // 透明度初始值设为0
  }

  componentDidMount() {
    Animated.timing(                  // 随时间变化而执行动画
      this.state.fadeAnim,            // 动画中的变量值
      {
        toValue: 1,                   // 透明度最终变为1，即完全不透明
        duration: 2000,              // 让动画持续一段时间
      }
    ).start();                        // 开始执行动画
  }

  render() {
    let { fadeAnim } = this.state;

    return (
      <Animated.View                 // 使用专门的可动画化的View组件
        style={{
          ...this.props.style,
          opacity: fadeAnim,         // 将透明度指定为动画变量值
        }}
      >
        {this.props.children}
      </Animated.View>
    );
  }
}

var Goods = [
  {
    title: '恋爱不是谈出来的，而是陷进去的。',
    price: '房东',
    url: 'vip'
  },
  {
    title: '不能输，笑吧！',
    price: '梦幻岛',
    url: 'vip'
  },
  {
    title: '不要熄灭你的灵感及想象，不要成为你楷模的奴隶。',
    price: '漆黑的魅影',
    url: 'vip'
  },
  {
    title: '重要的感情总是非常单纯 自然脱口而出的',
    price: '电玩咖',
    url: 'vip'
  },
  {
    title: '真相只有一个！',
    price: '柯南',
    url: 'vip'
  },
  {
    title: '真正的大师，如艺术一般 ',
    price: '守望先锋',
    url: 'vip'
  },

]

//单元格组件
class Item extends Component {
  render() {
    return (
      <View style={styles.box}>
        <View style={styles.item1}>
          <TouchableOpacity onPress={this.props.press}>
            <Text numberOfLines={1} style={styles.item_text}>{this.props.title}</Text>
            <Text numberOfLines={1} style={styles.item_text1}>{this.props.price}</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

//列表组件
class List extends Component {
  render() {
    var data = this.props.goods;
    var list = [];
    for (var i in data) {
      if (i % 2 === 0) {
        var row = (
          <View key={i} style={styles.row}>
            <Item
              url={data[parseInt(i)].url}
              title={data[parseInt(i)].title}
              price={data[parseInt(i)].price}
              press={this.press.bind(this, data[parseInt(i)])}
            ></Item>
            {/* <View style={styles.test}>

            </View> */}
            <Item
              url={data[parseInt(i) + 1].url}
              title={data[parseInt(i) + 1].title}
              price={data[parseInt(i) + 1].price}
              press={this.press.bind(this, data[parseInt(i) + 1])}
            ></Item>
          </View>);
        list.push(row);
      }
    }

    return (
      <ScrollView style={{}}>
        {list}
      </ScrollView>
    );
  }

  press(data) {
    Alert.alert('Talk TO', ': ' + data.title);
  }
}

export default class App extends Component {
  constructor(props) {
    super(props);
    var { height, width } = Dimensions.get('window');
    this.state = { activePage: 0, width: width, inputText: '' };
    this.renderScrollItem = this.renderScrollItem.bind(this)
  }
  render() {
    return (

      <ScrollView>
        <StatusBar backgroundColor={'#f892ac'}
          barStyle={'light-content'}
        />
        <View style={styles.container}>
          <View style={styles.header}>
            <Text style={{ color: 'white', fontSize: 17, fontWeight: '500' }}>Talk To</Text>

          </View>
          <FadeInView>
            <View style={{ backgroundColor: '#ffffff', marginTop: 20, marginBottom: 15 }}>
              <ScrollView
                horizontal={true}
                pagingEnabled={true}
                removeClippedSubviews={false}
                showsHorizontalScrollIndicator={false}
                onMomentumScrollEnd={this.onScrollAnimationEnd.bind(this)}
              >
                {this.renderScrollItem()}
              </ScrollView>
            </View>
          </FadeInView>

          <FadeInView>
            <View style={styles.groups}>
              <View style={styles.groupcontainer}>
                <View style={styles.group1}>
                  <TouchableOpacity style={styles.item}>
                    <View style={styles.item}>
                      <Image source={{ uri: 'red' }} style={{ flex: 1, margin: 10 }} />
                      <Text style={{ textAlign: 'center' }}>丝带</Text>
                    </View>
                  </TouchableOpacity>
                  <TouchableOpacity style={styles.item}>
                    <View style={styles.item}>
                      <Image source={{ uri: 'shangping' }} style={{ flex: 1, margin: 10 }} />
                      <Text style={{ textAlign: 'center' }}>API</Text>
                    </View>
                  </TouchableOpacity>
                  <TouchableOpacity style={styles.item}>
                    <View style={styles.item}>
                      <Image source={{ uri: 'shui' }} style={{ flex: 1, margin: 10 }} />
                      <Text style={{ textAlign: 'center' }}>筹款</Text>
                    </View>
                  </TouchableOpacity>
                  <TouchableOpacity style={styles.item}>
                    <View style={styles.item}>
                      <Image source={{ uri: 'recent' }} style={{ flex: 1, margin: 10 }} />
                      <Text style={{ textAlign: 'center' }}>最近</Text>
                    </View>
                  </TouchableOpacity>
                  <TouchableOpacity style={styles.item}>
                    <View style={styles.item}>
                      <Image source={{ uri: 'love' }} style={{ flex: 1, margin: 10 }} />
                      <Text style={{ textAlign: 'center' }}>喜欢</Text>
                    </View>
                  </TouchableOpacity>
                </View>
              </View>
            </View>
          </FadeInView>


          <FadeInView>
            <View style={styles.ctr}>
              <List goods={Goods}></List>
            </View>
          </FadeInView>

          <View style={[styles.flex, styles.flexDirection, { marginTop: 15 }]}>
            <View style={styles.flex}>
              <TextInput
                style={styles.input} placeholder={'您想说的写在这里吧~！'}
                placeholderTextColor={'#e3e3e3'}
                onChangeText={(text) => this.setState({ inputText: text })}
                value={this.state.inputText}
                editable={true} mutiline={true}>
              </TextInput>
            </View>
            <TouchableOpacity style={styles.btn}>
              <Text>发布</Text>
            </TouchableOpacity>
          </View>
        </View>
      </ScrollView>
    );
  }
  onScrollAnimationEnd(e) {
    //求当前页码:通过屏幕偏移量/屏幕宽度
    var currentPage = Math.floor(e.nativeEvent.contentOffset.x / this.state.width + 0.4);
    //更新状态机
    this.setState({
      activePage: currentPage
    });
  }
  //ScrollView内部分组件
  renderScrollItem() {
    //定义组件数组，图片或者颜色我们先用图片
    var itemArr = [];
    //颜色数组
    var picArr = ['first', 'second', 'thend'];
    //遍历创建组件
    for (var i = 0; i < picArr.length; i++) {
      itemArr.push(
        <View key={i} style={{ width: this.state.width, height: 255 }}>
          <Image source={{ uri: picArr[i] }} style={{ width: this.state.width, height: 255 }} />
        </View>
      );
    }
    //返回组件数组
    return itemArr;
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    height: 1500,
    backgroundColor: '#e3e3e3',
  },
  header: {
    backgroundColor: '#f892ac',
    flexDirection: 'row',
    height: 60,
    alignItems: 'center',
    justifyContent: 'center',
    borderBottomLeftRadius: 50,
    borderBottomRightRadius: 50
  },
  btn: {
    width: 55,
    height: 45,
    backgroundColor: '#ffffff',
    marginLeft: -5,
    marginRight: 20,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 10
  },
  flex: {
    flex: 1,
  },
  input: {
    height: 45,
    width: 300,
    borderWidth: 1,
    marginLeft: 25,
    marginRight: 2,
    backgroundColor: '#ffffff',
    borderColor: '#f0f0f0',
    borderRadius: 10
  },
  flexDirection: {
    flexDirection: 'row',
  },
  picStyle: {
    width: 30,
    height: 30,
    position: 'absolute',
    top: 15,
    right: 20,
  },
  itemStyle: {
    flexDirection: 'row',
    backgroundColor: 'white',
    justifyContent: 'space-between',
    height: 60,
    alignItems: 'center',
    borderBottomColor: '#e3e3e3',
    marginLeft: 10,
    marginRight: 10,
    marginTop: 10,
    borderRadius: 20
  },
  intStyle: {
    flexDirection: 'row',
    backgroundColor: 'white',
    justifyContent: 'space-between',
    height: 180,
    alignItems: 'center',
    borderBottomColor: '#e3e3e3',
    marginTop: 10,
    marginLeft: 10,
    marginRight: 10,
    borderRadius: 20
  },
  groups: {
    paddingLeft: 15,
    paddingRight: 15,
    height: 110,
    backgroundColor: '#ffffff'
  },
  group1: {
    height: 90,
    flexDirection: 'row'
  },
  item: {
    flex: 1,
    height: 85,
  },
  groupcontainer: {
    marginTop: 15
  },
  box: {
    marginTop: 10,
    width: 340,
    height: 150,
    backgroundColor: '#ffffff',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center'
  },
  flex: {
    flex: 1
  },
  ctr: {
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center'
  },
  row: {
    width: 340,
    flexDirection: 'column',
    // marginBottom: 15,
  },
  item1: {
    height: 140,
    marginRight: 5,
    borderColor: '#ffffff',
  },
  img: {
    marginTop: 5,
    marginLeft: 5,
    width: 130,
    height: 140,
    backgroundColor: '#ffffff'
  },
  item_text: {
    paddingTop: 12,
    fontSize: 18,
    width: 230,
    color: '#898989',
    height: 30,
    lineHeight: 18,
    textAlign: 'center',
    marginTop: 15,
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center'
  },
  item_text1: {
    paddingTop: 12,
    fontSize: 12,
    width: 230,
    color: '#fd8b04',
    height: 30,
    lineHeight: 18,
    textAlign: 'center',
    marginTop: 25,
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center'
  }
});